 <template>
    <div>
        <div class="bodersytle">
         <el-col :span="15">
            <el-form label-position="left" label-width="80px" :model="formLabelAlign">
                <el-form-item label="姓名">
                  <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                  <el-input v-model="formLabelAlign.phone"></el-input>
                </el-form-item>
               <el-form-item label="维修描述">
                <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formLabelAlign.content">
              </el-input>
               </el-form-item>    
               <el-form-item  label="地址选择">
                <el-radio-group v-model="radio1" @input="radioeven(radio1)">
                    <el-radio-button label="1" style="margin: 0px 5px;">手动填写(建议非房间号)</el-radio-button>
                    <el-radio-button label="2" style="margin: 0px 5px;">自动选择(建议是房间号)</el-radio-button>
                  </el-radio-group>
          </el-form-item>        
          <el-form-item>
            <el-cascader
            v-model="value"
            :options="options2"
            @change="handleChange" v-if="radio1==2" clearable>
          </el-cascader>
             <template v-if="radio1==1">
            <el-input
            placeholder="请输入地址"
            v-model="selectdooraddress"
            clearable >
          </el-input>
        </template>

          </el-form-item>

          <el-form-item style="text-align: center;">

            <el-button type="success"  style="width: 200px;" plain @ @click="submit">提交</el-button>
          </el-form-item>


              </el-form>
         </el-col>
           
          








        </div>

      
    </div>
  </template>
  <script>
    // 1 导入需要使用的组件
     export default{
  

      data(){
        return{
        formLabelAlign: {
          name: '',
          content:'',
          phone:"",
       
        },
        options2:[],
        value: [],
        radio1: '2',
        selectdoorid:"",
        selectdooraddress:"",
        
      
        }
        
      },
created(){

  var listinfo=[]
  var count=1;
 for(var i=1;i<=4;i++){
  var item={}
 
   item["value"]=i
   item["label"]=i+"号楼"
   var itemlist=[]
  for(var j=1;j<=6;j++){
      var list={}
         list["value"]=j;
         list["label"]=j+"层"  

        //  声明门号
         var valuelist=[]
    for(var t=1;t<=2;t++){
      var value={}
       value["value"]=count
       value["label"]="100"+t
       valuelist.push(value)
       count++ 
    }
    list["children"]=valuelist
    itemlist.push(list) 
  }
  item["children"]=itemlist
  listinfo.push(item)
 }
this.options2=listinfo

console.log(listinfo)


},

      methods:{

        // 多级选择
        handleChange(value) {

         this.selectdoorid=value[2]
       

      },

        //  单选框只能选择一个 当选择另一个后 当前置空
      radioeven(value){
 console.log("地址选择")

 this.selectdooraddress=""
 this.selectdoorid="",
   this.value=""

  
 this.$forceUpdate()
  
      },
 
      // 提交表单按钮
      submit(){
        console.log("这是提交表单")
        this.$confirm('是否确定提交表单', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '提交',
          cancelButtonText: '取消'
        })
          .then(() => {
           var that=this;

          
           var item=that.formLabelAlign
             if(!item.name||!item.content||!item.phone){
              this.$message({
          message: '请填写完整信息',
          type: 'warning'
        });
        return

             }
             if(!this.selectdoorid&&!this.selectdooraddress){
              this.$message({
          message: '请填写完整信息',
          type: 'warning'
        });
        return
             }

             let time = new Date()
        let nowTime = this.timestampToTime(time.toLocaleString('en-US',{hour12: false}).split(" "))
        console.log(nowTime)
  
             this.axios({
             url:this.$api+'/maintainrequest/insertData', 
             dataType:"json",
            method:'post',
            params:{
              name:item.name,
              phone:item.phone,
              content:item.content,
              hId:this.selectdoorid,
              address:this.selectdooraddress,
              requesttime:nowTime
            }   
          }).then(res=>{
            console.log(res)
            this.$message({
          message: '添加成功',
          type: 'success'
        });


        
          }).catch(res=>{
            console.log(res)
            this.$message({
          message: '添加失败',
          type: 'warning'
        });
        
          })
             
           



           
          }).catch((res)=>{

          })
   


      },



             // 转化时间格式
 timestampToTime(times) {
    let time = times[1]
    let mdy = times[0]
    mdy = mdy.split('/')
    let month = parseInt(mdy[0]);
    let day = parseInt(mdy[1]);
    let year = parseInt(mdy[2])
    //打印结果为：2022-8-31 11:08:34
    return year + '-' + month + '-' + day + ' ' + time
},


  
      
     

 

  
      }
     }
  </script>
  <style scoped>
  .bodersytle{
    display: flex; 
    flex-direction: row;
    justify-content: center;
    margin: 20px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: white;
    padding: 50px 20px 20px 20px;
    height: 70vh;
    font-weight: bold;
  }
  </style>